<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>通话</title>
	    <%@include file='../../common/common.jsp' %>
	    <%@include file="../../common/jsVersion.jsp" %>
	    <script type="text/javascript">
	    	var contextPath= '${contextPath}';
	    </script>
  </head>
<body>
    <div class="main-content" id="telRecordList">
        <div class="nav-list-title">
            <ul class="list-title-crumbs">
                <li>
                  <i class="fa fa-map-marker mainTone"></i>
                  <a class="text">通话记录列表</a>
<!--                   <i class="fa fa-angle-right"></i> -->
                </li>
<!--                 <li><a class="mainTone">通话</a></li> -->
            </ul>
        </div>
        <div class="item-info-surround">
            <h3 class="item-title">查询条件</h3>
            <ul class="exhibition-list">
                <li class="col-lg-7 col-md-12">
                    <div class="currency-template-query">
                        <label class="template-title">通话日期：</label>
                        <div class="template-controls">
                            <select class="form-control form-control-sm fl" v-model="params.recordDate" v-on:click="selectRecordDate">
                                <option v-bind:value="1" >自定</option>
                                <option v-bind:value="0">全部</option>
                            </select>
                            <div class="time-selector time-selector-line">
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control" placeholder="请选择" id="callTimeBeforeStr" v-model="params.callTimeBeforeStr">
                                <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                              <div class="interval-span">-</div>
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control" placeholder="请选择" id="callTimeAfterStr" v-model="params.callTimeAfterStr">
                                <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="col-lg-5 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">通话人：</label>
                        <div class="template-controls">
                            <select class="form-control form-control-sm fl" v-model="params.userDepartmentId" v-on:change="selectUserDepartment" >
                                <option value="">请选择</option>
                                <option v-for="userDepartment in userDepartmentList" v-bind:value="userDepartment.id">{{userDepartment.departmentName}}</option>
                            </select>
                            <select class="form-control form-control-sm fl mL10" v-model="params.createUserId" >
                                <option value="">请选择</option>
                                <option v-for="user in userList" v-bind:value="user.id">{{user.userName}}</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">来源：</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.terminalModel">
                                <option value="">不限</option>
                                <option v-bind:value="0" >客户</option>
                                <option v-bind:value="1" >外部呼入</option>
                                <option v-bind:value="2" >手动拨打</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">通话状态：</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.callStatus">
                                <option value="">不限</option>
                                <option v-bind:value="1">接通</option>
                                <option v-bind:value="2">未接通</option>
                            </select>
                        </div>
                    </div>
                </li>
                 <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">时长：</label>
                        <div class="template-controls">
                            <input type="number" class="form-control form-control-sm" v-model="params.startBillableSeconds"> &nbsp;&nbsp;秒-&nbsp;&nbsp;
                            <input type="number" class="form-control form-control-sm" v-model="params.endBillableSeconds"> &nbsp;&nbsp;秒
                        </div>
                    </div>
                </li>
                
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">关键词：</label>
                        <div class="template-controls">
                            <input type="text" class="form-control" placeholder="客户姓名/主叫号码/被叫号码" v-model="params.customerName">
                        </div>
                    </div>
                </li>
            </ul>
            <div class="query-operation">
                <div class="fr">
                    <button class="btn" v-on:click="getList">查询</button>
                    <a href="javascript:;" class="empty" v-on:click="clearForm">清空</a>
                </div>
            </div>
        </div>
        <div class="item-info-surround">
            <h3 class="item-title bor-nb">通话记录列表   (注:系统将定时获取通话情况。如显示"未取话单"，请等待系统获取通话情况。)</h3>
            <div class="table-responsive">
                <table class="table table-striped table-bordered min-width-1150">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>时长</th>
                            <th>部门</th>
                            <th>员工</th>
                            <th>主叫号码</th>
                            <th>被叫号码</th>
                            <th>来源</th>
                            <th>关联业务</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="pp in ppList">
                            <td>{{pp.callTime | moment('YYYY-MM-DD')}}</td>
                            <td>{{pp.startTime | moment('HH:mm:ss')}}</td>
                            <td>{{pp.endTime | moment('HH:mm:ss')}}</td>
                            <td>{{pp.billableSeconds | billableSeconds(pp.callStatus)}}</td>
                            <td>
                                <div class="across-show" data-toggle="tooltip" data-placement="bottom" v-bind:title="pp.departmentName">
                                    {{pp.departmentName}}
                                </div></td>
                            <td>{{pp.userName}}</td>
                            <td>{{pp.caller}}</td>
                            <td>{{pp.called}}</td>
                            <td>{{pp.terminalModel | terminal}}</td>
                            <td>
                            	 <a href="javascript:void(0)" v-if="pp.customerName && pp.customerName!='null'" class="operationBtn" v-on:click="selectCustomerDetail(pp.terminalModelId,pp.projectId)">{{pp.customerName}}</a>
                            </td>
                            <td>
                                <a href="javascript:;" class="operationBtn"  data-toggle="modal" data-target="#myModal" v-if="pp.recordUrl!=null && pp.recordUrl!=''" v-on:click="listerRadio(pp.recordUrl)">听录音</a>
                                <a href="javascript:;" class="operationBtn" v-if="pp.recordUrl!=null && pp.recordUrl!=''" v-on:click="downLoad(pp.recordUrl)">下载</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
         <div class="row">
				<div class="col-xs-12" id="pagination">
				</div>
			</div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title">播放录音</h4>
                    </div>
                    <div class="modal-body">
<!--                         <audio id="playaudio"  preload="auto" controls="controls"></audio>audio/seeyouagain.mp3 -->
                    </div>
                </div>
            </div>
        </div>
    </div> 
</body>
<script type="text/javascript" src="${contextPath}/static/optimization/js/customer/telRecord/list.js?v=${jsVersion}"></script>
<script type="text/javascript">
    $(function(){
        
        $(".form_datetime").datetimepicker({
            format: "yyyy-mm-dd",//日yyyy-mm-dd hh:ii
            autoclose: true,
            todayBtn: true,
            minView:2,//显示到天设置2、显示到时设置1、显示到分设置0
            startView:2,//首先显示的视图
            pickerPosition: "bottom-left"
            // startDate: "2016-12-14 10:00"
        });
        
    })
</script>
</html>
